<template>
  <div class="echart">
    <div
      ref="echartDivRef"
      style="
         {
          width: 100%;
          height: 360px;
        }
      "
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import chinaMapData from '../data/china.json'

echarts.registerMap('china', chinaMapData as any)
const props = defineProps({
  options: {
    type: Object,
    default: () => ({})
  }
})

const echartDivRef = ref()
onMounted(() => {
  const echartInstance = echarts.init(echartDivRef.value)
  window.addEventListener('resize', () => {
    echartInstance.resize()
  })
  watch(
    () => props.options,
    function (newVlue) {
      console.log('e')
      echartInstance.setOption(props.options)
    },
    {
      immediate: true
    }
  )
})
</script>
<style lang="less" scoped></style>
